<template>
	<view>
		<view class="shop-list env_bar">
			<view
				class="shop-item"
				v-if="pageList && pageList.length > 0"
				v-for="(item, index) in pageList"
				@click="shopInfoClick(index)"
			>
				<img
					:src="item.goods_info.compound_img"
					style="
						width: 186rpx;
						height: 186rpx;
						border-radius: 8rpx;
						flex-shrink: 0;
						display: block;
						margin-right: 25rpx;
					"
					alt=""
				/>
				<view class="shop-item-textBox">
					<view class="shop-item-t1">{{
						item.goods_info.goods_name
					}}</view>
					<view class="shop-item-t2"
						>已消耗{{ item.num }}个普通款</view
					>
					<view class="shop-item-btn">
						<view
							class="shop-item-t3"
							style="
								font-family: OPPOSans;
								font-weight: 500;
								color: #9b9b9b;
								font-size: 24rpx;
							"
							>点击查看></view
						>
						<view
							style="
								font-family: OPPOSans;
								font-weight: 500;
								font-size: 24rpx;
								color: #9b9b9b;
							"
							>{{ item.add_time }}</view
						>
					</view>
				</view>
			</view>
			<view
				v-if="pageList.length <= 0"
				class=""
				style="
					font-family: OPPOSans;
					font-weight: 500;
					font-size: 30rpx;
					color: #cacaca;
					text-align: center;
					margin: 20vh auto 0;
				"
			>
				<image
					src="https://ojqn.wm2177.com/wechat_imgs/store-null.png"
					alt=""
					style="
						width: 214rpx;
						height: 214rpx;
						display: block;
						margin: 0 auto 27rpx;
					"
				/>
				<view
					class=""
					style="margin-top: 22rpx; font-size: 26rpx; color: #cacaca"
				>
					暂无记录
				</view>
			</view>
		</view>
		<!-- <u-popup v-model="isShowAllShop" mode="bottom"> -->
		<uni-popup ref="listpopup" type="bottom" v-if="pageList.length > 0">
			<view class="env_bar" style="background: #fff; height: 66vh">
				<view class="pr pop_shop_title">
					使用明细
					<view class="pop_shop_title_c" @click="offisShowAllShop"
						>X</view
					>
				</view>
				<scroll-view scroll-y="true" style="height: 93%;">
					<view
						class="pop-main"
						v-for="(item, index) in pageList[pageListIndex]
							.material_info"
					>
						<img
							:src="item.img"
							alt=""
							style="
								width: 103rpx;
								height: 103rpx;
								display: block;
								flex-shrink: 0;
								border-radius: 8rpx;
							"
						/>
						<view class="" style="margin-left: 24rpx">
							<view class="t1">{{ item.goods_name }}</view>
							<view class="t2">数量:{{ item.num }}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<!-- </u-popup> -->
	</view>
</template>

<script>
	import { http } from '@/utils/http.js'
	import { parseTime } from '@/utils/index.js'

	export default {
		data() {
			return {
				pageList: [],
				isShowAllShop: false,
				pageListIndex: 0,
			}
		},
		methods: {
			async getPageList() {
				let res = await http.request({
					url: '/api/compound/compoundLog',
					method: 'POST',
					data: {
						page: 1,
						limit: 100,
					},
				})
				console.log(res)
				res.data.forEach((item) => {
					item.add_time = parseTime(item.add_time)
				})
				if (res.st == 1) {
					this.pageList = res.data
				}
			},
			offisShowAllShop() {
				this.isShowAllShop = false
				this.$refs.listpopup.close('bottom')
			},
			shopInfoClick(e) {
				this.pageListIndex = e
				this.isShowAllShop = !this.isShowAllShop
				if (this.isShowAllShop) {
					this.$refs.listpopup.open('bottom')
				} else {
					this.$refs.listpopup.close('bottom')
				}
			},
		},
		mounted() {
			this.getPageList()
		},
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.shop-list {
		margin: 0 31rpx;
	}

	.shop-item {
		display: flex;
		justify-content: space-between;
		margin-top: 42rpx;
		padding-bottom: 42rpx;
		border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);
	}
	.shop-item:last-child {
		border: none;
	}
	.shop-item-textBox {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 194rpx;
	}
	.shop-item-t1 {
		font-family: OPPOSans;
		font-weight: 500;
		font-size: 28rpx;
		color: #1a1a1a;

		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;

		width: 476rpx;
		line-height: 32rpx;
		height: 64rpx;
		/* margin-bottom: 32rpx; */

		flex-shrink: 0;
	}
	.shop-item-btn {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.shop-item-t2 {
		font-family: OPPOSans;
		font-weight: 500;
		font-size: 24rpx;
		color: #7863ff;
		flex-shrink: 0;
	}
	.pop_shop_title {
		font-family: OPPOSans;
		font-weight: 500;
		font-size: 38rpx;
		color: #1a1a1a;
		line-height: 39rpx;
		background-color: #fff;
		/* background: linear-gradient(0deg, #3D3D3D 0%, #3D3D3D 46.484375%, #3D3D3D 100%); */
		/* -webkit-background-clip: text;
		-webkit-text-fill-color: transparent; */
		text-align: center;
		padding-top: 32rpx;
		padding-bottom: 58rpx;
	}
	.pop_shop_title_c {
		position: absolute;
		top: 42rpx;
		right: 29rpx;
		line-height: 39rpx;
		font-size: 41rpx;
		color: #1a1a1a;
		background-color: #1a1a1a;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.pop-main {
		display: flex;
		margin: 20rpx 0;
		margin-left: 20rpx;
	}
	.pop-main .t1 {
		font-family: OPPOSans;
		font-weight: 500;
		font-size: 24rpx;
		color: #1a1a1a;
		line-height: 24rpx;
		width: 492rpx;
		margin-bottom: 44rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	.pop-main .t2 {
		font-family: OPPOSans;
		font-weight: 500;
		font-size: 24rpx;
		color: #7863ff;
	}

	.env_bar {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>
